<template>
  <div class="container">
    <el-container>
      <el-header>
        <el-button type="text"
          ><img src="../../assets/login-logo.png" alt=""
        /></el-button>
      </el-header>
      <el-main>
        <el-card>
          <h1>欢迎登录</h1>
          <el-form
            :model="loginForm"
            :rules="loginFormRules"
            ref="loginFormRef"
          >
            <el-form-item prop="userName">
              <el-input
                v-model="loginForm.userName"
                placeholder="请输入手机号"
                ref="mobileRef"
              >
                <el-button slot="prepend" icon="el-icon-user-solid"></el-button>
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                placeholder="请输入密码"
                type="password"
              >
                <el-button slot="prepend" icon="el-icon-lock"></el-button>
              </el-input>
              <div class="el-form-item__error" v-if="checkLoginRequest">
                用户名或密码不正确
              </div>
            </el-form-item>
          </el-form>
          <el-button type="primary" :disabled="loginBtn" class="lbtn" @click="this.login"
            >登录</el-button
          >
          <el-row type="flex" justify="space-between">
            <el-col :span="12" class=""
              ><router-link to="/updatepwd"><el-link type="info">忘记密码？</el-link></router-link></el-col
            >
            <el-col :span="12" style="align:right"
              ><router-link to="/register"
                ><el-link type="info">注册</el-link></router-link
              ></el-col
            >
          </el-row>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    // 验证邮箱的规则
    var checkEmail = (rules, value, cb) => {
      const regMail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!regMail.test(value)) {
        return cb(new Error('请输入合法的邮箱'))
      }
      return cb()
    }
    // 验证手机的规则
    var checkMobile = async (rules, value, cb) => {
      const regMoblie = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
      if (!regMoblie.test(value)) {
        return cb(new Error('请输入合法的手机号'))
      }
      // 查询该手机号是否已经存在
      const { data: res } = await this.isExistUser()
      if (res.code === '500') return cb(new Error('用户名不存在'))
      return cb()
    }
    return {
      loginBtn: false,
      checkLoginRequest: false,
      loginForm: {
        userName: '',
        password: ''
      },
      loginFormRules: {
        userName: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }
          // {
          //   min: 6,
          //   max: 15,
          //   message: '用户名长度在6~15个字符之间',
          //   trigger: 'blur'
          // }
        ]
      }
    }
  },
  methods: {
    // 监听回车事件来触发登录方法
    keyupSubmit(){
      const lett = this
      document.onkeydown = function(e){
        let key = window.event.keyCode
        if(key===13){
          lett.login()
        }
      }
    },
    // 登录
    login() {
      this.loginBtn = true
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          this.loginBtn = false
          return this.$message.error('您的输入不正确!')
        } 
        // 调用登录接口
        const { data: res } = await this.$http.post('login.do', this.loginForm)
        console.log(res)
        if (res.code !== '200') {
          this.checkLoginRequest = true
          this.loginBtn = false
          return
        }
        // 登录成功
        this.checkLoginRequest = false
        // 将token和uid分别保存在vuex和localStorage中
        this.$store.dispatch('setToken', res.data.jwtToken)
        this.$store.dispatch('setUser', res.data.uid)
        window.localStorage.setItem('uid', res.data.uid)
        window.localStorage.setItem('token', res.data.jwtToken)
        this.$message.success('登录成功')
        this.$router.push('/my')
      })
    },
    // 根据用户输入的手机号判断是否存在
    isExistUser() {
      return this.$http.get('isExistUser.do', {
        params: {
          userName: this.loginForm.userName
        }
      })
    }
  },
  mounted() {
    
  },
}
</script>

<style lang="less" scoped>
.container {
  background-color: #c4d2d3;
  height: 100%;
}

.el-card {
  width: 500px;
  height: 350px;
  display: flex;
  justify-content: center;
  color: #979797;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-card .el-row .el-col .el-link {
  font-size: 13px;
}

.el-main {
  display: flex;
  justify-content: center;
}

.el-form-item {
  width: 100%;
}

.lbtn {
  width: 100%;
  margin-bottom: 15px;
}
</style>
